<template>
	<div>
		<div style="position: relative;padding:20px;border-radius: 8px;display: flex;justify-content: space-between;"
			class="bgfff">

			<div style="display: flex;">
				<div style="width: 180px;position: relative;">
					<div class=" ">预警分析</div>
			
					<img src="@/assets/sIcon198.png" v-if="detail.warningType == 'WARNING'"
						style="width:148px;height:98px;position: absolute;bottom:0;left:0" />
					<img src="@/assets/sIcon197.png" v-if="detail.warningType == 'EXCEEDED'"
						style="width:148px;height:98px;position: absolute;bottom:0;left:0" />
				</div>
			
				<div style="width: calc(100% - 180px);">
					<div style="color:#333;font-size:16px;margin-bottom:10px; ">
						<span class="mr10">{{detail.outletName}}</span>
						<!-- <el-tag>{{detail.statusStr}}</el-tag> -->
					</div>
					<div style="color:#888;margin-bottom:10px;">{{detail.problemContent}}</div>
					<div style="color:#888;margin-bottom:20px;">监测预案：{{detail.monitorPlan}}</div>
					<div style="color:#888;">{{detail.createTime}}</div>
				</div>
			</div>

			<!-- <div>
				<el-button @click="back" type="primary">退回</el-button>
				<el-button @click="check" type="primary" class="ml10">复核</el-button>
			</div> -->
		</div>

		<div style="position: relative;padding:20px;border-radius: 8px;" class="bgfff mt10">
			<div class="displayFlex mb20">
				<div v-for="(item,index) in PollutionList" :key="index" @click="changePoll(item)"
					:class="[item.divisorCode == divisorCode?'selected':'']"
					style="color:#888;border-right:1px solid#EDECF1;padding-right:20px" class="mr20 point"
					:style="{borderRight:index == (PollutionList.length -1)?'':'1px solid#EDECF1'}">
					{{item.pollutionName}}
				</div>
			</div>

			<div style="color#333; margin-bottom:10px">{{pollutionName}}的分钟数据</div>
			<div id="chart1" style="width:100%;height:200px"></div>
			<!-- <el-empty v-else /> -->

			<div style="color#333; margin-bottom:10px;margin-top:10px">{{pollutionName}}的小时数据</div>
			<div id="chart2" style="width:100%;height:200px"></div>
			<!-- <el-empty v-else /> -->
		</div>

		<div class="mt10">
			<warningCenterOrder v-if="detail.outletId" :outletId="detail.outletId"></warningCenterOrder>
		</div>

		<div style="position: relative;padding:20px;border-radius: 8px;display: flex;" class="bgfff mt20"
			v-if="detail.status == 'APPROVING' || detail.status == 'COMPLETE'">
			<div style="width: 180px;">
				处理方案
			</div>

			<div style="width:calc(100% - 600px)">
				<div style="color: #8A8A8A;font-size:13px;height: 40px;float: right;">
					<span v-if="detail.solvedByName">记录人：{{detail.solvedByName}}</span>
					<span v-if="detail.solvedTime" class="ml10">{{detail.solvedTime}}</span>
				</div>
				<div style="background: #EDF0F7;color: #8A8A8A;margin-top:40px;padding:10px 20px">
					<div>{{detail.solvedContent}}</div>
					<div>{{detail.problemReason}}</div>
				</div>

				<div v-if="detail.solvedImgUrlList && detail.solvedImgUrlList.length > 0" class="mb10">
					<div style="backround:#484848;width: 195px; height: 123px;margin-right: 10px;display: inline-block;border:1px solid#f5f5f5;border-radius: 4px;"
						v-for="(item,index) in detail.solvedImgUrlList" :key="index">
						<el-image style="width:100%;height:100%" :src="fileViewUrl+item" fit="contain"></el-image>
					</div>
				</div>

				<div class="displayFlex mt20" v-if="detail.status == 'APPROVING' && detail.canCheck">
					<el-button type="primary" @click="check">复核</el-button>
					<el-button type="danger" @click="back">退回</el-button>
				</div>
			</div>
		</div>

		<div style="position: relative;padding:20px;border-radius: 8px;display: flex;" class="bgfff mt20"
			v-if="detail.status == 'APPROVING' || detail.status == 'COMPLETE'">
			<div style="width: 180px;">
				反馈和总结
			</div>

			<div style="width:calc(100% - 600px)">
				<div style="color: #8A8A8A;font-size:13px;height: 40px;float: right;">
					<span v-if="detail.checkByName">记录人：{{detail.checkByName}}</span>
					<span v-if="detail.checkTime" class="ml10">{{detail.checkTime}}</span>
				</div>
				<div>
					<el-input placeholder="请描述反馈和总结" type="textarea" autosize show-word-limit maxlength="2000"
						v-model="detail.checkContent" />
				</div>
				<div class="mt20">
					<el-button v-if="detail.solvedResult == 'SOLVED'"
						type="primary">{{detail.solvedResultStr}}</el-button>
					<el-button v-else type="danger">{{detail.solvedResultStr}}</el-button>
				</div>
				<!-- <div class="displayFlex mt20" v-if="detail.status != 'COMPLETE' && detail.canCheck">
					<el-button type="primary" @click="closeProblem">关闭工单</el-button>
					<el-button type="danger" @click="tuihuiShow = !tuihuiShow">退回</el-button>
				</div> -->
			</div>
		</div>


		<div style="position: relative;padding:20px;border-radius: 8px;display: flex;" class="bgfff mt20"
			v-if="detail.backContent && detail.status == 'BACK'">
			<div style="width: 180px;">
				退回意见
			</div>
		
			<div style="width:calc(100% - 600px)">
				<div>
					<el-input placeholder="请描述退回意见" type="textarea" autosize show-word-limit maxlength="2000"
						v-model="detail.backContent" />
				</div>
		
				<!-- <div class="displayFlex mt20" v-if="detail.status != 'COMPLETE'">
					<el-button type="primary" @click="confirmBackProblem">确认退回</el-button>
				</div> -->
			</div>
		</div>
		
		<el-dialog title="退回意见" :visible.sync="tuihuiShow" width="30%">
			<div style="width:100%">
				<div>
					<el-input placeholder="请描述退回意见" type="textarea" autosize show-word-limit maxlength="2000"
						v-model="detail.backContent" />
				</div>
		
				<div class="mt20 textCenter" v-if="detail.status != 'COMPLETE'" style="margin:0 auto;">
					<el-button type="primary" @click="confirmBackProblem">确认退回</el-button>
				</div>
			</div>
		</el-dialog>


	</div>
</template>

<script>
	import warningCenterOrder from '@/components/wasteWater/warningCenterOrder'
	import * as echarts from 'echarts';
	import moment from 'moment'
	let that
	export default {
		components: {
			warningCenterOrder
		},
		data() {
			return {
				detail: {},
				params: {
					warningId: ''
				},
				PollutionList: [],
				divisorCode: '',
				pollutionName: '',
				chartData1: [],
				chartData2: [],
				tuihuiShow: false,
			}
		},
		created: function() {},
		mounted: function() {
			that = this
			that.params.warningId = that.getQueryString("id")
			that.getDetailById()

		},

		methods: {

			confirmBackProblem() {
				if (!that.detail.backContent) return that.$message.error("请填写退回意见")
				this.$confirm('此操作退回工单, 是否继续?', '提示', {
					confirmButtonText: '确定',
					cancelButtonText: '取消',
					type: 'warning'
				}).then(() => {
					that.ajax({
						url: '/waterOutlet/warning/back',
						contentType: 'application/json',
						data: JSON.stringify({
							id: that.detail.id,
							backContent: that.detail.backContent
						}),
						success: function(result) {
							that.getGoingSimpleList()
						},
					})
				})
			},

			closeProblem() {
				if (!that.detail.checkContent) return that.$message.error("请填写反馈和总结")
				this.$confirm('此操作关闭工单, 是否继续?', '提示', {
					confirmButtonText: '确定',
					cancelButtonText: '取消',
					type: 'warning'
				}).then(() => {
					that.ajax({
						url: '/waterOutlet/warning/check',
						contentType: 'application/json',
						data: JSON.stringify({
							id: that.detail.id,
							checkContent: that.detail.checkContent
						}),
						success: function(result) {
							that.getGoingSimpleList()
						},
					})
				})
			},


			check() {
				this.$prompt('反馈和总结', '复核预警', {
					confirmButtonText: '确定',
					cancelButtonText: '取消',
				}).then(({
					value
				}) => {
					that.ajax({
						url: '/waterOutlet/warning/check',
						contentType: 'application/json',
						data: JSON.stringify({
							id: that.detail.id,
							checkContent: value
						}),
						success: function(result) {
							that.getDetailById()
						},
					})
				})
			},

			back() {
				this.$prompt('退回原因', '是否确认退回预警', {
					confirmButtonText: '确定',
					cancelButtonText: '取消',
				}).then(({
					value
				}) => {
					that.ajax({
						url: '/waterOutlet/warning/back',
						contentType: 'application/json',
						data: JSON.stringify({
							id: that.detail.id,
							backContent: value
						}),
						success: function(result) {
							that.getDetailById()
						},
					})
				})
			},

			changePoll(item) {
				that.divisorCode = item.divisorCode
				that.pollutionName = item.pollutionName
				that.getWaterPollutionMinuteList()
				that.getWaterPollutionHourList()
			},

			getMonitorPollutionList() {
				that.ajax({
					url: 'waterOutlet/getMonitorPollutionList',
					contentType: 'application/x-www-form-urlencoded',
					data: {
						outletId: that.detail.outletId
					},
					success: function(result) {
						that.PollutionList = result.data

						that.$nex
						if (!that.divisorCode) {
							that.pollutionName = result.data[0].pollutionName
							that.divisorCode = result.data[0].divisorCode
						}
						that.getWaterPollutionMinuteList()
						that.getWaterPollutionHourList()
					},
				})
			},

			getWaterPollutionHourList() {
				let nowDay = moment().format('DD') - 1
				nowDay = nowDay < 10 ? '0' + nowDay : nowDay
				let startTime = moment().format('YYYY-MM') + "-" + nowDay + " " + moment().format(
					'HH:mm:ss')
				let endTime = moment().format('YYYY-MM-DD HH:mm:ss')
				that.ajax({
					url: 'waterOutlet/getWaterPollutionHourList',
					contentType: 'application/json',
					data: JSON.stringify({
						outletId: that.detail.outletId,
						divisorCode: that.divisorCode,
						startTime: startTime,
						endTime: endTime
					}),
					success: function(result) {
						that.chartData2 = result.data
						let xAxisData = []
						let seriesData = []
						for (let item of result.data) {
							xAxisData.push(item.createTime.split(" ")[1])
							seriesData.push(item.amount)
						}
						that.formcategory("chart2", xAxisData, seriesData)
					},
				})
			},


			getWaterPollutionMinuteList() {
				let nowHour = moment().format('HH') - 1
				nowHour = nowHour < 10 ? '0' + nowHour : nowHour
				let startTime = that.detail.startTime
				let endTime = that.detail.endTime
				that.ajax({
					url: 'waterOutlet/getWaterPollutionMinuteList',
					contentType: 'application/json',
					data: JSON.stringify({
						outletId: that.detail.outletId,
						divisorCode: that.divisorCode,
						startTime: startTime,
						endTime: endTime
					}),
					success: function(result) {
						that.chartData1 = result.data
						let xAxisData = []
						let seriesData = []
						for (let item of result.data) {
							xAxisData.push(item.createTime.split(" ")[1])
							seriesData.push(item.amount)
						}
						that.formcategory("chart1", xAxisData, seriesData)
					},
				})
			},


			getDetailById() {
				that.ajax({
					url: 'waterOutlet/warning/getDetailById',
					contentType: 'application/x-www-form-urlencoded',
					data: that.params,
					success: function(result) {
						that.detail = result.data
						that.getMonitorPollutionList()
						that.validateDistribute()
					},
				})
			},


			validateDistribute() {
				that.ajax({
					url: 'onlineMonitor/config/validateCheck',
					contentType: 'application/x-www-form-urlencoded',
					data: {
						outletId: that.detail.outletId
					},
					success: function(result) {
						that.detail.canCheck = result.data
						that.$forceUpdate()
					},
				})
			},

			formcategory(charyId, xAxisData, seriesData) {
				var chartDom = document.getElementById(charyId);
				var myChart = echarts.init(chartDom);
				var option;

				option = {
					grid: {
						top: "12%",
						bottom: "10%",
						left: "5%"
					},
					xAxis: {
						type: 'category',
						boundaryGap: false,
						data: xAxisData,
						splitLine: {
							show: false,
						},
						axisTick: {
							show: false // 不显示坐标轴刻度线
						},
						axisLine: {
							lineStyle: {
								opacity: 0 //将y轴刻度线的opacity属性设置为0，即为隐藏刻度线
							}
						},
					},
					yAxis: {
						type: 'value',
						splitLine: {
							show: false,
						},
						splitLine: {
							show: true,
							lineStyle: {
								color: ["#FAFBFC"],
							},
						},
						axisLabel: {
							//y轴文字的配置
							textStyle: {
								color: "rgba(215, 215, 215, 1)",
							},
							// formatter: '{value} %'//y轴的每一个刻度值后面加上‘%’号
						},
						axisLine: {
							lineStyle: {
								opacity: 0 //将y轴刻度线的opacity属性设置为0，即为隐藏刻度线
							}
						},
					},
					series: [{
						data: seriesData,
						type: 'line',
						label: {
							show: true,
							position: 'top'
						}
					}]
				};

				option && myChart.setOption(option);

			}
		}
	}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
	.selected {
		color: #3A3EF4 !important;
		font-weight: bold
	}
</style>